<template>
	<m-layout class="order" title="我的订单" gap="0 24">
		<!-- tab -->
		<m-tab slot="header" align="flex" justify="space-between" color="#333" v-model="state" @onChange="reset"
			:list="tabList" gap="10 0">
		</m-tab>
		<!-- 列表 -->
		<m-block bgColor="unset">
			<m-block class="li" gap="24 30 0" spa="20 0 0" v-for="(item,index) in listArr" :key="index" :is-loading="listLoading">
				<view class="" @click="Jump('/pages/order/details/details?orderId='+item.id)">
					<view class="">
						<view class="status flex-between mb-16">
							<text>订单：{{item.ordercode}}</text>
							<text :class="stateClass[item.state]">{{orderState[item.state]}}</text>
							<!-- <text :class="stateClass[item.state]">{{Number(item.isaftersell)>=1?'售后处理中':orderState[item.state]}}</text> -->
						</view>
						<!-- 商品 详情 -->
						<view class="goods-card flex-between">
							<view class="left">
								<m-image size="124" :src="item.picurl" radius="10" />
							</view>
							<view class="center">
								<view class="title otp2">
									<text>{{item.gname}}</text>
								</view>
								<text class="fs21 text-grey">所选规格：{{item.attrName?item.attrName:'默认规格'}}</text>
							</view>
							<view class="right">
								<view class="flex-column">
									<m-price :value="item.price" :size="[27,18]" color="#333"></m-price>
								</view>
								<text class="block">共{{item.buycount}}件</text>
							</view>
						</view>
					</view>
					<view class="flex-between ptb-4 mt-8">
						<text class="fs26">商品总价</text>
						<view class="flex">
							<m-price v-if="item.totalamount" :value="item.totalamount" :size="[28,18]"
								color="#333"></m-price>
						</view>
					</view>
					<view class="flex-between ptb-4" v-if="item.otype==1">
						<template v-if="item.wards==2 || item.wards==4">
							<text class="fs26">运费</text>
							<m-price :value="item.yf" :size="[28,18]" color="#333" />
						</template>
						<template v-if="[2,3,4].includes(Number(item.state)) && (item.wards==1 || item.wards==3)">
							<text class="fs26">运费</text>
							<m-price :value="item.yf" :size="[28,18]" color="#333" />
						</template>
					</view>
					<view class="price flex-between">
						<text>订单金额</text>
						<view class="flex">
							<m-price v-if="(item.totalamount+item.yf)" :value="item.totalamount+((item.state==13||item.state==11||((item.wards==1 || item.wards==3)&&item.state==1) || item.wards==1 || item.wards==3)?0:item.yf)"
								:size="[32,18]"></m-price>
						</view>
					</view>
					<view class="flex-between mt-12 text-red" v-if="item.otype==2">
						<text class="fs26">托管地区</text>
						<text class="fs24">{{item.attrName}}</text>
					</view>
					
				</view>
				<!-- 操作 -->
				<view class="flex jc-flex-end mt-24 mb-24">
					<view class="flex">
						<!-- 修改地址 -->
						<template v-if="item.state==1&&item.otype==1">
							<text v-if="item.exp_address=='自提'" class="fs25 mr-12">自提商品</text>
							<m-button v-else type="hollow" size="small"
								@click="Jump('/pages/order/details/details?orderId='+item.id)">修改地址</m-button>
						</template>
						<!-- 取消订单 -->
						<m-button class="mlr-8" type="hollow" size="small" v-if="item.state==1"
							@click="cancelItem=item;cencalShow=true">取消订单</m-button>
						<!-- 继续支付 -->
						<m-button v-if="item.state==1" size="small"
							@click="Jump('/pages/order/surePay/surePay?isOrder=true&orderid=' + item.id)">继续支付</m-button>
						<!-- 查看物流 -->
						<template v-if="item.state==3||item.state==4">
							<template v-if="item.exp_address=='自提'">
								<text class="fs25">自提商品</text>
							</template>
							<template v-else>
								<m-button v-if="item.expCode.split(',').length==1" type="hollow" size="small"
									@click="Jump('/pages/webview/webview?url=https://m.kuaidi100.com/app/query/?nu='+item.expCode)">查看物流</m-button>
								<m-button v-else type="hollow" size="small"
									@click="Jump('/pages/order/details/details?orderId='+item.id)">查看物流</m-button>
							</template>
						</template>
						<template v-if="item.state==2||item.state==3">
							<template v-if="item.isaftersell==1">
								<text class="text-red fs21">·售后处理中</text>
							</template>
							<template v-if="item.isaftersell==2">
								<text class="text-red fs21">售后已驳回</text>
							</template>
							<template v-if="item.isaftersell==3">
								<text class="text-red fs21">后台取消订单</text>
							</template>
						</template>
						<!-- <template v-if="item.state==2||item.state==3">
							<template v-if="item.isaftersell!=1">
								<m-button @click="Jump('/pages/order/addAfterSale/addAfterSale?orderId='+item.id)"
									class="ml-12" type="hollow" size="small">申请售后</m-button>
							</template>
						</template> -->
						<!-- 确认收货 -->
						<m-button class="ml-12" v-if="item.state == 3" size="small"
							@click="signinInfo = item;receivingShow  = true">确认收货</m-button>
						<template v-if="item.wards==1 || item.wards==3">
							<m-button type="hollow" class="ml-12" v-if="item.state == 11" size="small"  @click="rebackFn(item)">申请退款</m-button>
							<m-button class="ml-12" v-if="item.state == 11" size="small"
							<m-button type="hollow" class="ml-12" v-if="item.state == 11" size="small"
								@click="Jump('/pages/order/pickUp/pickUp?otype=1&orderId='+item.id)">提货</m-button>
							<m-button class="ml-12" v-if="item.state == 11" size="small"
								@click="Jump('/pages/order/pickUp/pickUp?otype=2&orderId='+item.id)">托管</m-button>
						</template>
					</view>
					<view v-if="item.desccontent">
						<text class="text-red fs24">{{item.desccontent}}</text>
					</view>
				</view>
				<!-- 售后 -->
				<view class="pb-24 flex" v-if="Number(item.isaftersell)>=1" @click="Jump('/pages/order/details/details?orderId='+item.id)">
			     	<text class=" text-red fs22" v-if="Number(item.isaftersell)==1">退款处理中</text>
			     	<text class=" text-red fs22" v-if="Number(item.isaftersell)==2">退款已驳回</text>
			     	<text class=" text-red fs22" v-if="Number(item.isaftersell)==3">退款已完成</text>
					<m-icon size="24" color="red" type="icon-qianjin" />
				</view>
			</m-block>
			<m-loading :list='listArr' title="未查询到订单" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
		</m-block>
		<!-- 取消订单 弹框 -->
		<m-dialog :isShow="cencalShow" :showCancel="true" @handleCancel="cencalShow = false" title="确定取消订单吗？"
			@handleConfirm="CancellOrderFn">
			<view class="cencal-pupop flex-between">
				<text class="error">*</text>
				<input type="text" v-model="cancelReasonNo" placeholder="请输入取消原因" placeholder-class="placeholder-class">
			</view>
		</m-dialog>
		<!-- 确认收货 弹框-->
		<m-dialog :isShow="receivingShow" :showCancel="true" @handleCancel="receivingShow = false" title="提示"
			@handleConfirm="SignIn">
			<view class="hint-pupop">
				{{showTyep==1?'请确认物品已安全到达您的手中':'确定删除全部吗'}}
			</view>
		</m-dialog>
		<!-- 多运单号 弹框 -->
		<m-dialog :isShow='nuShow' :showCancel="true" @handleCancel="nuShow = false" title="物流单号列表">
			<view class="flex-column">
				<view class=" flex">
					<text>{{}}</text>
				</view>
			</view>
		</m-dialog>
		<!-- 打印机 申请退款弹框  -->
		<m-dialog :isShow="rebackShow" :showCancel="true" @handleCancel="rebackShow = false" title="提示"
			@handleConfirm="confimRebackFn" :loading="rebackLoading">
			<view class="hint-pupop">
				<text>{{`确定对商品 ${rebackGoodsInfo.gname}进行退款申请`}}</text>
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { GetOrderPage, SignIn, SetAddr, CancellOrder,refundApply } from '@/api/Order.js'
	export default {
		data() {
			return {
				rebackLoading:false,
				rebackGoodsInfo:{},
				rebackShow:false,
				listLoading: false,
				state: 1,
				tabList: [
					'全部',
					'待付款',
					'待发货',
					'待收货',
					'已签收',
					'已取消'
				],
				statusEnum: {
					0: '1,2,3,4,5,6,7,8,9,11,13,15',
					1: 1,
					2: 2,
					3: '3,11',
					4: 4,
					5: '5,7,8,9',
				},
				listArr: [],
				pageIndex: 1,
				pageCount: 1,
				isLoading: false,

				signinInfo: {}, // 确认收货对象
				cancelItem: {}, // 取消订单对象
				cancelReasonNo: '', // 取消理由
				cencalShow: false, // 取消订单弹框
				receivingShow: false, // 确认收货弹框
				// add
				showTyep: 1,
				nuShow: false, //  运单号 弹框
				stateClass: {
					1: 'text-red',
					2: 'text-primary',
					3: 'text-primary',
					4: 'text-primary',
					5: 'dark-light',
				}
			};
		},
		computed: {
			orderState() {
				const state = this.$store.state.general.enum;
				console.log('OrderState', state['OrderState']);
				return state['OrderState']
			},
		},
		onLoad({ state }) {
			this.state = Number(state) || 0;
			// this.reset()
		},
		onShow() {
			this.reset()
			// let that = this
			// uni.$on('updateData', function(data) {
			// 	console.log('监听到事件来自 updateData ，携带参数为：' + data);
			// 	if (data == 'order') {
			// 		that.reset()
			// 	}
			// })
		},
		methods: {
			//  申请退款
			async confimRebackFn(){
				this.rebackLoading=true;
				const {success,data,msg}= await refundApply({
					orderid:this.rebackGoodsInfo.id
				})
				this.rebackLoading=false;
				this.Toast(msg)
				if(!success) return
				this.state=0;
				this.rebackShow=false;
				this.reset();
			},
			rebackFn(item){
				this.rebackGoodsInfo=item;
				this.rebackShow=true
			},
			// 修改地址
			async SetAddrFn() {
				this.Toast('暂未开放')
			},
			// 取消订单
			async CancellOrderFn() {
				if (!this.cancelReasonNo) {
					return this.Toast('请输入取消理由')
				}
				const { success, msg, data } = await CancellOrder({
					orderid: this.cancelItem.id,
					// cancelReasonNo: this.cancelReasonNo,
				})
				this.Toast(msg)
				if (success) {
					this.Toast('操作成功')
					this.cancelItem = {};
					this.cancelReasonNo = '';
					this.cencalShow = false;
					this.reset();
				}
			},
			// 签收
			async SignIn() {
				const { success, msg } = await SignIn({
					id: this.signinInfo['id']
				})
				this.Toast(msg)
				this.receivingShow = false;
				if (success) {
					this.signinInfo = {};
					this.reset();
				}
			},

			async reset() {
				this.listArr = [];
				this.listLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				await this.getData();
				this.listLoading = false;
			},
			async getData() {
				if (this.pageIndex > this.pageCount) return
				this.isLoading = true;
				const { success, list, pageCount } = await GetOrderPage({
					state: this.statusEnum[this.state],
					pageIndex: this.pageIndex,
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	}
</script>

<style lang="scss">
	.order {
		padding-bottom: 100rpx;

		::v-deep .small-tab {
			padding: 10rpx 24rpx;
			overflow-x: scroll;

			.tab-box {
				min-width: 100rpx;

				text {
					font-size: 28rpx !important;
				}
			}

			.tab-box:nth-of-type(1) {
				min-width: 72rpx;
			}

			.tab-box+.tab-box {
				margin-left: 15rpx;
			}
		}
	}

	.li {
		position: relative;

		.status {
			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			text:nth-of-type(2) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--theme);
			}
		}

		.goods-card {
			align-items: inherit;

			.left {}

			.center {
				flex: 1;
				overflow: hidden;
				padding: 0 30rpx;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.guige {
					padding-top: 16rpx;

					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.right {
				text-align: right;

				.block {
					padding-top: 10rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.price {
			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.order-state {
			margin-top: 20rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 10rpx 30rpx;

			.state {
				padding: 0 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.otw {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.btn-box {
			.m-button {
				margin-top: 25rpx;
				margin-left: 20rpx;
			}
		}
	}

	.cencal-pupop {
		input {
			flex: 1;
			margin-left: 10rpx;
			padding: 15rpx 35rpx;
			background: #F6F6F6;
			border-radius: 100px 100px 100px 100px;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.placeholder-class {
			font-size: 30rpx;
			color: #CCCCCC;
		}
	}

	.hint-pupop {
		text-align: center;
		padding: 24rpx;
	}
</style>